<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/fenlei.css">
    <link rel="stylesheet" href="../css/gowuche.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1341521_995z9b8mqwa.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <title>Document</title>
</head>

<body>
    <header>
        <p>购物车</p>
        <span id="edit">编辑</span>
    </header>
    <main>
     
    </main>
    <!-- 合计部分 -->
    <div id="total">
        <div id="allcheck"></div><span id="ac">全选</span>
        <span class = "del">删除</span>
        <div id="price">
            <div id="tt">
                <p>合计(不含运费):<span>￥0.00</span></p>
            </div>
            <div id="sub">
                <p>已优惠:<span>￥0.00</span></p>
            </div>
        </div>
        <div id="gopay">去结算(<span>0</span>)</div>
    </div>
    <!-- 底部 -->
    <footer>
        <a href="../首页.html">
            <img src="../image/shouye01.png" alt="">
            <span>首页</span>
        </a>
        <a href="./分类.html">
            <img src="../image/fenlei01.png" alt="">
            <span>分类</span>
        </a>
        <a href="./吃饭吧.html">
            <img src="../image/chifanba01.png" alt="">
            <span>吃饭吧</span>
        </a>
        <a href="./购物车.html">
            <img src="../image/gouwuche02.png" alt="">
            <span>购物车</span>
            <div id="num">3</div>
        </a>
        <a href="./我的易果.html">
            <img src="../image/wodeyiguo01.png" alt="">
            <span>我的易果</span>
        </a>
    </footer>
    <script src="../js/rem.js"></script>
    <!-- <script src="./js/jquery-1.11.3.min.js"></script> -->
    <script src="../js/api.js"></script>
    <script src="../js/axios.min.js"></script>
    <script>
        // 根据用户id显示购物车内容
        console.log(id);
        axios.get(cart_cartShow_Api, {
            params: {
                id
            }
        }).then(res => {
            console.log(res.data);
            let html = res.data.map(v =>
                `
                <div class="cont"  data-id=${v.id}>
                    <div class="check" id='che${v.id}'data-id=${v.id}></div>
                    <div class="pic"></div>
                    <div class="xq">
                        <h4>${v.name}</h4>
                        <div class="price">
                        <div class="aprice" id="price${v.id}">￥${v.price}</div>
                        <div class="num">
                            <input type="button" class="sub" value="-"   data-id="${v.id}">
                            <input type="text" class='pnum' id="n${v.id}" value="${v.number}">
                            <input type="button" class="add" value="+"  data-id=${v.id}>
                        </div>
                        </div>
                    </div>
            </div>
                `
            ).join("");
            let main = document.querySelector("main");
            main.innerHTML = html;
            Anext();
            changenum()
        })



        var Anext = function () {
            // 单选框样式 点击增加自定义属性 checked = "checked"
            let checks = document.querySelectorAll(".check");
            console.log(checks);
            let to = 0
            let te = 0;
            checks.forEach((v) => {
                v.setAttribute("checked","checked");
                v.classList.add("icon-duigou", "iconfont", "checked");  
                totalprice1()
                v.onclick = function () {
                    let checked = v.getAttribute("checked");
                    let goodsId = parseInt(this.getAttribute('data-id'))
                    // 数量根据checked改变
                    //商品价格
                    let pric = $(`#price${goodsId}`).text().replace(/￥/g, '')
                    // 商品数量
                    let nu = $(`#n${goodsId}`).val()
                    to = pric * nu
                    if (checked) {
                        v.removeAttribute("checked");
                        v.classList.remove("checked", "icon-duigou", "iconfont");
                        let yuanlai = $('#tt span').text().replace(/￥/g, '')
                        let t = Number(yuanlai) - Number(to) 
                        $('#tt span').text(t.toFixed(2))
                      
                    } else {
                        v.setAttribute("checked", "checked");
                        v.classList.add("icon-duigou", "iconfont", "checked");
                        console.log(v);

                        let yuanlai = $('#tt span').text().replace(/￥/g, '')
                        console.log(yuanlai);
                        let t = Number(to) + Number(yuanlai)
                        $('#tt span').text(t.toFixed(2))                   
                    }
                    allC();
                };
            })
            // 全选按钮
            let allC = function () {
                let allcheck = document.querySelector("#allcheck");
                let carr = [...checks].every((v) => {
                    return (v.getAttribute("checked") == "checked")
                });
                if (carr) {
                    allcheck.classList.add("icon-duigou", "iconfont", "checked");
                    allcheck.setAttribute("checked", "checked");
                } else {
                    allcheck.classList.remove("icon-duigou", "iconfont", "checked");
                    allcheck.removeAttribute("checked");
                }
            }
            allcheck.onclick = function () {
                let isCheck = allcheck.getAttribute("checked");
                if (isCheck) {
                    allcheck.classList.remove("icon-duigou", "iconfont", "checked");
                    allcheck.removeAttribute("checked");
                    checks.forEach((v) => {
                        v.removeAttribute("checked");
                        v.classList.remove("checked", "icon-duigou", "iconfont");
                    })
                    $('#tt span').text('￥0.00')
                } else {
                    allcheck.classList.add("icon-duigou", "iconfont", "checked");
                    allcheck.setAttribute("checked", "checked");
                    checks.forEach((v) => {
                        v.setAttribute("checked", "checked");
                        v.classList.add("checked", "icon-duigou", "iconfont");
                    })
                    //总价
                    totalprice1()
                }
            }
            // 删除按钮
            let del = document.querySelector(".del")
            del.onclick = function(){
                checks.forEach(v=>{
                    if(v.getAttribute("checked")=='checked'){
                        v.parentElement.remove();
                        let goodsId = v.getAttribute("data-id");
                        let number = v.getAttribute("num")
                        console.log(goodsId);
                        console.log(id);
                        $.post(delete_goods_Api,{goodsId,userId:id},function(res){
                           console.log(res);
                        })
                    }
                })
            }




            // 编辑按钮
            let ac = document.querySelector("#ac");
            let editBtn = document.querySelector("#edit");
            editBtn.onclick = function () {
                allC();
                let checkF = window.getComputedStyle(checks[0]).display;
                if (checkF == "none") {
                    checks.forEach((v) => {
                        v.style.display = "block";
                        allcheck.style.display = "block";
                        ac.style.display = "block";
                        del.style.display = "block"
                    })
                } else {
                    checks.forEach((v) => {
                        v.style.display = "none";
                        allcheck.style.display = "none";
                        ac.style.display = "none";
                        del.style.display = "none"

                    })
                }

            }
            //下标商品数字
            // let num = document.querySelector("#num");
            // num.innerHTML = checks.length;
            //去结算 
            let gopayNum = document.querySelector("#gopay span");
            let gopay = document.querySelector("#gopay");
            gopayNum.innerHTML = checks.length;
            gopay.onclick = function () {
                location.href = "订单结算.html";
            }


        }
        // 数量的改变
        function changenum() {
            $(function () {
                //减
                $('.sub').click(function () {
                    let goodsId = parseInt(this.getAttribute('data-id'))
                    let pnum = $(`#n${goodsId}`).val()
                    // console.log(pnum);
                    pnum--;
                    if (pnum == 0) {
                        pnum = 1;
                    }
                    changeyemian(pnum, goodsId)
                    console.log(pnum, goodsId);
                    totalnum()
                })
                //加
                $('.add').click(function () {
                    let goodsId = parseInt(this.getAttribute('data-id'))
                    let pnum = $(`#n${goodsId}`).val()
                    pnum++
                    changeyemian(pnum, goodsId)
                    totalnum()

                })

                //更改页面的数量
                function changeyemian(pnum, goodsId) {
                    //购物车下面的数量
                    // 上传服务器
                    $.post(cartAdd_Api, {
                        goodsId,
                        number: pnum,
                        userId: id
                    }, function (res) {
                        console.log(res);
                        $(`#n${goodsId}`).val(pnum)
                        //商品总价

                        //判断数量改变时check值
                        let tarobj = $(`#che${goodsId}`)
                        console.log(tarobj);
                        let fg = tarobj.hasClass("checked")
                        console.log(fg)
                        if (fg) {
                            console.log(1)
                            let total = 0;
                            $.post(cart_cartShow_Api, {
                                id
                            }, function (res) {
                                console.log(res);
                                let to = 0
                                res.forEach(v => {
                                    // 根据商品id判断是否位checked
                                    let tf = $(`#che${v.id}`).hasClass('checked')
                                    if(tf){
                                        let pric = $(`#price${v.id}`).text().replace(/￥/g, '')
                                        let nu = $(`#n${v.id}`).val()
                                        //当前商品的总价格
                                        to += pric * nu
                                        console.log(to);
                                        $('#tt span').text(to.toFixed(2))
                                    }
                                    console.log(tf);
                                })
                            })
                        }else{
                            
                        }

                    })
                }
            })
        }
        //商品总价
        function totalprice1() {
            $(function () {
                $.post(cart_cartShow_Api, {
                    id
                }, function (res) {
                    console.log(res);
                    let totalprice = 0
                    res.forEach(v => {
                        totalprice += Number((v.price * v.number))
                        $('#tt span').text(`￥${totalprice}`)
                    })
                })
            })
        }

    </script>
</body>

</html>